<template>
	<view>
		<view class="inv-h-w">
			<view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="Inv=0">问答</view>
			<view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="Inv=1">互动消息</view>
			<view :class="['inv-h',Inv==2?'inv-h-se':'']" @click="Inv=2">通知</view>
		</view>
		<view class="" v-show="Inv == 0">
			<view class="center" v-for="(item,index) in answersList" :key="index" @click="answersDetalls()">
				<view class="center-top">
					<view class="center-img">
						<image :src="item.head" mode=""></image>
					</view>
					<view class="center-right">
						<view>{{item.text}} <text>1天前</text></view>
						<view>{{item.time}}</view>
					</view>
				</view>
				<view class="center-bom">
					<view class="left">
						<view class="bom-left">
							<view class="bom-img">
								<image src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3734835391,3731417484&fm=15&gp=0.jpg"
								 mode=""></image>
							</view>
							<view>瓜子脸留空气刘海还看吗？</view>
						</view>
						<view class="bom-left">
							<view class="bom-img">
								<image src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3734835391,3731417484&fm=15&gp=0.jpg"
								 mode=""></image>
							</view>
							<view>{{item.name}}</view>
						</view>
					</view>
					<view class="right-img" v-if="true">
						<image :src="item.img" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="" v-show="Inv == 1">
			<interaction></interaction>
		</view>
		<view class="" v-show="Inv == 2">
			<view class="notice" @click="Tony()">
				<view class="notice-img">
					<image src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1944436520,1411096787&fm=26&gp=0.jpg" mode=""></image>
				</view>
				<view class="notice-centen">
					<view class="notice-name">成都沙龙理发店</view>
					<view>评论说这家店超级棒</view>
				</view>
				<view class="notice-right ">
					20分钟前
				</view>
			</view>
		</view>
		
	</view>

</template>
<script>
	import interaction from "@/pages/message/components/interaction.vue"
	export default {
		components: {
			interaction
		},
		data() {
			return {
				
				Inv: 0,
				answersList: [{
					head: 'http://m.imeitou.com/uploads/allimg/2020100609/2t2fes0wwa2.jpg',
					text: '加菲猫',
					time: '2020/10/12',
					name: '每一个太阳升起，老想带去期待的问候：让每日的气体全是清爽让每日的情绪全是伸',
					img: 'http://m.imeitou.com/uploads/allimg/2020100609/2t2fes0wwa2.jpg'

				}]
			}
		},
		methods: {
			
			changeTab(Inv) {
				that.navIdx = Inv;

			},
			// 问答详情
			answersDetalls() {
				uni.navigateTo({
					url: "/pages/message/answer/answer"
				})
			},
			// tony设计师
			Tony(){
				uni.navigateTo({
					url:'/pages/message/Tony/Tony'
				})
			}
		}
	}
</script>


<style lang="scss">
	

	.risk-cont {
		color: #ccc;
	}

	.inv-h-w {
		background-color: #FFFFFF;
		height: 100upx;
		display: flex;
		border-bottom: 1rpx solid #ccc;
	}

	.center {
		padding: 20rpx;
		border-bottom: 1rpx solid #ccc;

		.center-top {
			display: flex;
			align-items: center;

			.center-img {
				width: 50rpx;
				height: 50rpx;
				border-radius: 40rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 40rpx;
				}
			}

			.center-right {
				font-size: 20rpx;
				margin-left: 20rpx;
			}

		}

		.center-bom {
			padding: 6rpx 10rpx;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;

			.left {
				// width: 70%;
				padding: 0 10rpx 0 0;

				.bom-left {
					display: flex;
					align-items: center;
					padding: 10rpx 0;
					text-align: left;
					font-size: 28rpx;

					.bom-img {
						// width: 9%;
						height: 10%;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 20rpx;


						image {
							width: 30rpx;
							height: 30rpx;
						}
					}


				}
			}

			.right-img {
				width: 30%;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 250rpx;
					height: 153rpx;
				}
			}
		}
	}

	.notice {
		padding: 20rpx;
		border-bottom: 1rpx solid #F3F3F3;
		display: flex;
		align-items: center;

		.notice-img {
			width: 7%;
			height: 20%;
			margin-right: 20rpx;

			image {
				width: 60rpx;
				height: 60rpx;
				border-radius: 40rpx;

			}
		}

		.notice-centen {
			width: 73%;
			font-size: 28rpx;
		}

		.notice-right {
			width: 20%;
			font-size: 25rpx;
			color: #ccc;
			text-align: center;
		}
	}

	.inv-h {
		font-size: 30upx;
		flex: 1;
		text-align: center;
		color: #666;
		height: 100upx;
		line-height: 100upx;
	}

	.inv-h-se {
		font-weight: bold;
		color: #5BA7FF;
		// height: 2rpx;
		// background-color: #5BA7FF;
		border-bottom: 1rpx solid #5BA7FF;

	}

	page {
		background-color: #fff;
	}
</style>
